import React, { Component } from 'react'
import { connect } from 'react-redux'
import { WingBlank, WhiteSpace, Result, List } from 'antd-mobile'
import { actionCreator } from '../../store/user'
import { Redirect } from 'react-router-dom'
class Personal extends Component {
  render() {
    const { props } = this.props
    const Item = List.Item
    const Brief = Item.Brief
    const isBoss = props.type === 'boss'
    const myImg = (src) =>{
      return (
        <img src={src} alt='' style={{width: '50px'}} />
      )
    }
    return props && props.user ? (
      <WingBlank>
        <Result
          img={myImg(require(`../../static/img/${props.avatar}.png`))}
          title={props.user}
          message={isBoss ? props.company:null}
        />
        <WhiteSpace></WhiteSpace>
        <List renderHeader={() => isBoss?'岗位简介':'个人信息'}>
          <Item>
            {props.title}
            <Brief>
              {props.desc}
            </Brief>
            <Brief>
              {isBoss ? `薪资:${props.money}` : null}
            </Brief>
          </Item>
        </List>
        <WhiteSpace></WhiteSpace>
        <List>
          <Item
            onClick={this.props.logout}
          >
            退出登录
          </Item>
        </List>
      </WingBlank>
    ) : <Redirect to='/login'/>
  }
}

const mapState = (state) => ({
  props: state.user
})
const mapDispatch = (dispatch) => ({
  logout(){
    dispatch(actionCreator.logout())
  }
})
export default connect(mapState, mapDispatch)(Personal)